<template>
  <view class="viewport">
    <!-- #ifndef MP-TOUTIAO -->
    <!-- 自定义导航栏 -->
    <uni-nav-bar class="uni-nav-bar" background-color="rgba(255,255,255,0)" :border="false" :statusBar="true"
      @clickLeft="goBack">
      <template #left>
        <view class="icon-arrow-left"></view>
      </template>
      <template #default>
        <view class="title">{{ getBaseTypeName(baseType!) }}专项练习</view>
      </template>
    </uni-nav-bar>
    <!-- #endif -->
    <!-- 抖音小程序顶部导航 -->
    <!-- #ifdef MP-TOUTIAO -->
    <view class="toutiao-nav-bar">
      <view class="status-bar"></view>
      <view class="title-container">
        <view class="title">{{ getBaseTypeName(baseType!) }}专项练习</view>
      </view>
    </view>
    <!-- #endif -->
    <scroll-view class="scroll-view" enable-back-to-top scroll-y>
      <!-- 专项练习-地方题-地方练习-考点练习 -->
      <view class="spe-exercises" v-if="locateQuestionsCheck">
        <view class="spe-exercises-item locate" @tap="toExercise(ExerciseTypeEnum.SpecialExerciseLocateQuestions)">
          <view class="title">{{ useCityInfo()?.name }}考题</view>
          <view class="desc">共{{ locateQuestionsCount }}题</view>
          <image class="img" :src="specialExerciseImages.locate" mode="widthFix" />
        </view>
        <view class="spe-exercises-item chapter" @tap="toChapterExercise">
          <view class="title">章节练习</view>
          <view class="desc">共{{ useSpecialExerciseChapterList(baseType!)?.length }}章</view>
          <image class="img" :src="specialExerciseImages.chpater" mode="widthFix" />
        </view>
        <view class="spe-exercises-item point" @tap="toKnowExercise">
          <view class="title">考点练习</view>
          <view class="desc">共{{ useSpecialExerciseKnowCount(baseType!) }}考点</view>
          <image class="img" :src="specialExerciseImages.point" mode="widthFix" />
        </view>
      </view>
      <view class="spe-exercises-no-locate" v-else>
        <view class="spe-exercises-item chapter" @tap="toChapterExercise">
          <view class="title">章节练习</view>
          <view class="desc">共{{ useSpecialExerciseChapterList(baseType!)?.length }}章</view>
          <image class="img" :src="specialExerciseImages.chpater" mode="widthFix" />
        </view>
        <view class="spe-exercises-item point" @tap="toKnowExercise">
          <view class="title">考点练习</view>
          <view class="desc">共{{ useSpecialExerciseKnowCount(baseType!) }}考点</view>
          <image class="img" :src="specialExerciseImages.point" mode="widthFix" />
        </view>
      </view>
      <!-- 专项练习-按钮组 -->
      <view class="spe-img-buttons">
        <view class="spe-img-buttons-item" v-for="(item, index) in specialExerciseButton" :key="index"
          @tap="toExercise(item.exerciseType)">
          <image class="img" :src="item.img" mode="widthFix" />
          <view class="title">{{ item.title }}</view>
          <view class="desc">共{{ useSpecialExerciseCount(item.exerciseType, baseType!).count }}题</view>
        </view>
      </view>
      <!-- 分割间隙 -->
      <view class="gap">

      </view>
      <!-- 专项练习-细分 -->
      <view class="special-details">
        <view class="special-details-title">专项练习</view>
        <!-- <view class="special-details-sub-title" @tap="toKnowExercise">
          <view class="title">考点学习进度</view>
          <uni-icons class="right" type="right" color="#0c413e" size="20"></uni-icons>
        </view> -->
        <view class="special-details-container">
          <view v-for="(item, index) in specialExerciseList" class="special-detail-item" :key="index"
            @tap="toExercise(ExerciseTypeEnum.SpecialExerciseQuestions, item.code!)">
            <view class="item-index">
              {{ index + 1 }}
            </view>
            <view class="item-name ellipsis">
              {{ item.name!.length > 10 ? item.name?.substring(0, 6) + '...' : item.name }}
            </view>
            <view class="item-num">
              {{ item.questions?.length }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, reactive } from 'vue'
  import type { SpecialExercise } from '@/api/base/types'
  import { ExerciseTypeEnum } from '@/api/constants'

  import { useSpecialExerciseCount, useGetSpecialExerciseList, useSpecialExerciseChapterList, useSpecialExerciseKnowCount, useLocateQuestionsCheck } from '@/composables/Exercise'
  import { useCityInfo } from '@/composables/LearnBase'

  import { useSpecialExerciseImages } from '@/pagesExercise/static/images'
  // #ifdef MP-TOUTIAO
  // 获取小程序下胶囊按钮的布局位置信息
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  // 上边界坐标，单位：px
  let top = (menuButtonInfo.top - 10) + 'px'
  const statusBarHeight = ref(top)
  // 高度，单位：px
  let height = (menuButtonInfo.height + 20) + 'px'
  const titleHeight = ref(height)
  // #endif
  const baseType = ref<string>()

  const specialExerciseImages = useSpecialExerciseImages()

  // 专项练习-按钮对象
  interface SpecialExerciseButtonItem {
    title: string,
    img: string,
    exerciseType: ExerciseTypeEnum,
  }

  const specialExerciseButton = reactive<SpecialExerciseButtonItem[]>([
    {
      title: '已做题',
      img: specialExerciseImages.finished,
      exerciseType: ExerciseTypeEnum.SequenceExerciseAnsweredQuestions
    },
    {
      title: '未做题',
      img: specialExerciseImages.unFinished,
      exerciseType: ExerciseTypeEnum.SequenceExerciseNoAnswerQuestions
    },
    {
      title: '做错题',
      img: specialExerciseImages.error,
      exerciseType: ExerciseTypeEnum.SequenceExerciseErrorQuestions
    },
    {
      title: '收藏题',
      img: specialExerciseImages.collect,
      exerciseType: ExerciseTypeEnum.SequenceExerciseCollectsQuestions
    },
    {
      title: '新规题',
      img: specialExerciseImages.newRule,
      exerciseType: ExerciseTypeEnum.SpecialExerciseNewRuleQuestions
    },
    {
      title: '易错题',
      img: specialExerciseImages.easyError,
      exerciseType: ExerciseTypeEnum.SpecialExerciseEasyErrorQuestions
    },
    {
      title: '争议题',
      img: specialExerciseImages.dispute,
      exerciseType: ExerciseTypeEnum.SpecialExerciseDisputeQuestions
    },
    {
      title: '多选题',
      img: specialExerciseImages.multiple,
      exerciseType: ExerciseTypeEnum.SpecialExerciseMultipleQuestions
    },
  ])

  // 专项列表
  const specialExerciseList = ref<SpecialExercise[]>([])
  // 本题试题的数量
  const locateQuestionsCount = ref(0)

  // 检查本题试题
  const locateQuestionsCheck = ref(false)
  onLoad((options: any) => {
    baseType.value = options.baseType
    specialExerciseList.value = useGetSpecialExerciseList(baseType.value!)?.filter(item => !['1101', '1102', '1103', '4101', '4102', '4103'].includes(item.code!))!
    locateQuestionsCheck.value = useLocateQuestionsCheck(baseType.value!)
    locateQuestionsCount.value = useSpecialExerciseCount(ExerciseTypeEnum.SpecialExerciseLocateQuestions, baseType.value!).count
  })

  // 根据题库类型获取题库名称
  const getBaseTypeName = (baseType: string) => {
    if (baseType === 'km1') {
      return '科目一'
    }
    else if (baseType === 'km4') {
      return '科目四'
    }
    else {
      return ""
    }
  }


  // 去章节练习
  const toChapterExercise = () => {
    uni.navigateTo({
      url: `/pagesExercise/chapterExercise/chapterExercise?&baseType=${baseType.value}`
    })
  }
  // 去考点练习
  const toKnowExercise = () => {
    uni.navigateTo({
      url: `/pagesExercise/knowExercise/knowExercise?&baseType=${baseType.value}`
    })
  }
  // 去练习
  const toExercise = (exerciseType: ExerciseTypeEnum, code?: string | number) => {
    uni.navigateTo({
      url: `/pagesExercise/answer/answer?exerciseType=${exerciseType}&baseType=${baseType.value}&code=${code}`
    })
  }

  //退出
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .viewport {
    display: flex;
    flex-direction: column;
  }

  .uni-nav-bar {
    .icon-arrow-left {
      font-weight: bold;
    }

    .title {
      align-self: center;
      flex: 1;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
    }
  }

  /* #ifdef MP-TOUTIAO */
  // 抖音自定义导航栏
  .toutiao-nav-bar {

    // 顶部占位
    .status-bar {
      width: 100vw;
      height: v-bind(statusBarHeight);
    }

    // 标题行
    .title-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      // justify-content: center;
      height: v-bind(titleHeight);

      .title {
        margin-left: 82rpx;
        font-size: 16px;
        // font-weight: bold;
      }
    }
  }

  /* #endif */

  .scroll-view {
    display: flex;
    flex-direction: column;

  }

  // 专项练习
  .spe-exercises {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20rpx 30rpx 0;

    .spe-exercises-item {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 26rpx 18rpx;
      width: 224rpx;
      height: 140rpx;
      color: #fff;
      border-radius: 10rpx;

      &.locate {
        background-image: linear-gradient(134deg,
            #f7a097 0%,
            #fd8076 100%),
          linear-gradient(#6e8875,
            #6e8875);
      }

      &.chapter {
        background-image: linear-gradient(128deg,
            #a2d558 0%,
            #8ac537 100%),
          linear-gradient(#e58074,
            #e58074);
      }

      &.point {
        background-image: linear-gradient(to right bottom,
            rgb(98, 170, 254),
            rgb(60, 135, 254));
      }

      .title {
        font-size: 30rpx;
      }

      .desc {
        font-size: 24rpx;
      }

      .img {
        position: absolute;
        right: 18rpx;
        bottom: 18rpx;
        width: 40rpx;
      }

    }
  }

  // 专项练习没有地方题
  .spe-exercises-no-locate {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20rpx 30rpx 0;

    .spe-exercises-item {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 26rpx 18rpx;
      width: 336rpx;
      height: 140rpx;
      color: #fff;
      border-radius: 10rpx;

      &.locate {
        background-image: linear-gradient(134deg,
            #f7a097 0%,
            #fd8076 100%),
          linear-gradient(#6e8875,
            #6e8875);
      }

      &.chapter {
        background-image: linear-gradient(128deg,
            #a2d558 0%,
            #8ac537 100%),
          linear-gradient(#e58074,
            #e58074);
      }

      &.point {
        background-image: linear-gradient(to right bottom,
            rgb(98, 170, 254),
            rgb(60, 135, 254));
      }

      .title {
        font-size: 30rpx;
      }

      .desc {
        font-size: 24rpx;
      }

      .img {
        position: absolute;
        right: 18rpx;
        bottom: 18rpx;
        width: 40rpx;
      }

    }
  }

  // 专项练习按钮
  .spe-img-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 40rpx;
    padding: 0rpx 30rpx;

    .spe-img-buttons-item {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      margin-top: 20rpx;
      width: 25%;

      .title {
        font-size: 26rpx;
        color: #333333;
      }

      .desc {
        font-size: 20rpx;
        color: #727272;
      }

      .img {
        width: 96rpx;
      }
    }
  }

  // 间隙
  .gap {
    height: 18rpx;
    background-color: rgb(244, 247, 247);
  }

  // 专项练习-细分
  .special-details {
    display: flex;
    flex-direction: column;
    margin-bottom: 24rpx;
    padding: 40rpx 30rpx;

    .special-details-title {
      font-size: 34rpx;
      font-weight: bold;
      color: #222222;
    }

    .special-details-sub-title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin: 30rpx 0;
      height: 87rpx;
      background-image: linear-gradient(270deg,
          #e3fcef 0%,
          #e4fcf0 27%,
          #e4fbf0 50%,
          #d0ffe7 100%),
        linear-gradient(#c18657,
          #c18657);
      border-radius: 17rpx;

      .title {
        margin-left: 26rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #083c3e;
      }
    }

    .special-details-container {
      display: flex;
      flex-wrap: wrap;

      .special-detail-item {
        display: flex;
        justify-content: start;
        width: 50%;
        font-size: 28rpx;
        padding: 30rpx 0;
        border-bottom: 1rpx solid rgb(245, 245, 245);

        .item-index {
          width: 40rpx;
          height: 40rpx;
          font-size: 22rpx;
          color: #fff;
          text-align: center;
          line-height: 40rpx;
          background-color: #29c56f;
          border-radius: 50%;
        }

        .item-name {
          margin-left: 28rpx;
          color: #1d1d1d;
        }

        .item-num {
          margin: 0 10rpx;
          color: #858585;
        }
      }
    }
  }
</style>
